<!--
 * @Descripttion: 密码修改
 * @LastEditors: xzh
 * @LastEditTime: 2023-09-03 23:52:11
-->
<template>
  <div class="dile-rootForm">
    <div class="dile-rootForm-content">
      <el-card>
        <template #header>
          <span>{{
            $t("page.systemManageArr.personSetArr.passwordChange")
          }}</span>
        </template>
        <el-form
          ref="formRef"
          class="el-form-card"
          :model="passwordChangeParam.formData"
          :rules="formRules"
          label-width="7rem"
          size="large"
          status-icon
        >
          <el-form-item
            :label="
              $t(
                'page.systemManageArr.personSetArr.passwordChangeArr.oldPassword'
              )
            "
            prop="oldPassword"
          >
            <el-input
              v-model="passwordChangeParam.formData.oldPassword"
              type="password"
              :placeholder="$t('common.enter')"
              show-password
            />
          </el-form-item>
          <el-form-item
            :label="
              $t(
                'page.systemManageArr.personSetArr.passwordChangeArr.newPassword'
              )
            "
            prop="newPassword"
          >
            <el-input
              v-model="passwordChangeParam.formData.newPassword"
              type="password"
              :placeholder="$t('common.enter')"
              show-password
            />
          </el-form-item>
          <el-form-item
            :label="
              $t(
                'page.systemManageArr.personSetArr.passwordChangeArr.repeatPassword'
              )
            "
            prop="repeatPassword"
          >
            <el-input
              v-model="passwordChangeParam.formData.repeatPassword"
              type="password"
              :placeholder="$t('common.enter')"
              show-password
            />
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="dile-rootForm-footTool">
      <el-button type="success" @click="handleSave">{{
        $t("common.define")
      }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { useI18n } from "vue-i18n";
import { object_Inf } from "@/utils/typings/index.type";

let { t } = useI18n();
/**
 * @Author: xzh
 * @Descripttion:修改密码表单
 * @Param:
 */
let passwordChangeParam = reactive<object_Inf>({
  formData: {
    oldPassword: "", //老密码
    newPassword: "", //新密码
    repeatPassword: "", //重复密码
  },
});
/**
 * @Author: xzh
 * @Descripttion: 表单实例
 * @Param:
 */
let formRef = ref<any>(null);

/**
 * @Author: xzh
 * @Descripttion:表单验证规则
 * @Param:
 * @param {*} computed
 */
let formRules = computed((): any => {
  return reactive({
    oldPassword: [
      {
        required: true,
        message:
          t("common.enter") +
          t("page.systemManageArr.personSetArr.passwordChangeArr.oldPassword"),
        trigger: "change",
      },
    ],
    newPassword: [
      {
        required: true,
        message:
          t("common.enter") +
          t("page.systemManageArr.personSetArr.passwordChangeArr.newPassword"),
        trigger: "change",
      },
    ],
    repeatPassword: [
      {
        required: true,
        message:
          t("common.enter") +
          t(
            "page.systemManageArr.personSetArr.passwordChangeArr.repeatPassword"
          ),
        trigger: "change",
      },
      {
        validator: (rule: any, value: any, callback: any) => {
          let { newPassword } = passwordChangeParam.formData;
          //验证新密码和重复密码输入是否一致
          newPassword == value || !value
            ? callback()
            : callback(
                new Error(
                  t(
                    "page.systemManageArr.personSetArr.passwordChangeArr.error.pleaseRepeatPassword"
                  )
                )
              );
        },
        trigger: "change",
      },
    ],
  });
});

/**
 * @Author: xzh
 * @Descripttion: 保存事件
 * @Param:
 */
let handleSave = async () => {
  let valid = await formRef.value.validate();
  if (!valid) {
    return false;
  }
};
</script>
<style lang="scss" scoped>
.el-form {
  width: 30rem;
  .el-form-item {
    margin: 0.2rem;
  }
}
</style>
